<template>
  <div class="A4Page">
    <el-button type="primary" @click="createPdf">导出</el-button>
    <main id="meet-pdf-id" :class="{ pdf__output: isPdf }">
      <!-- 页头页眉，定位到看不见的地方 -->
      <div id="pdf-header" style="height: 3.8cm" class="pdf-hf"></div>
      <div id="pdf-footer" style="height: 3.5cm" class="pdf-hf"></div>

      <!-- 导出区域 -->
      <div class="main page">
        <h3 class="main__title">《You must have your own hobbies》</h3>
        <p class="main__text text__indent">你若有自己的兴趣爱好</p>
        <p class="main__text text__indent pdf-group-item">
          生活便会呈现出另外一番景象
        </p>
        <p class="main__text text__indent pdf-group-item">也会浮现出更多美好</p>
        <p class="main__text text__indent pdf-group-item">悲伤失落时</p>
        <p class="main__text text__indent pdf-group-item">投入到兴趣中</p>
        <p class="main__text text__indent pdf-group-item">
          情绪就有了排解的出口
        </p>
        <p class="main__text text__indent pdf-group-item">烦躁不安时</p>
        <p class="main__text text__indent pdf-group-item">做点喜欢的事情</p>
        <p class="main__text text__indent pdf-group-item">心中的那个“怪兽”</p>
        <p class="main__text text__indent pdf-group-item">就会变得乖巧安静</p>
        <p class="main__text text__indent pdf-group-item">
          岁月会苍老我们的容颜
        </p>
        <p class="main__text text__indent pdf-group-item">带走我们的青春</p>
        <p class="main__text text__indent pdf-group-item">但是不能磨灭</p>
        <p class="main__text text__indent pdf-group-item">心中的那些热爱</p>
        <p class="main__text text__indent pdf-group-item">就像是我们在这世间</p>
        <p class="main__text text__indent pdf-group-item">总要有一些兴趣爱好</p>
        <p class="main__text text__indent pdf-group-item">留一席天地给自己</p>
        <p class="main__text text__indent pdf-group-item">和生活大胆拥抱</p>
        <p class="main__text text__indent pdf-group-item">在现实生活之中</p>
        <p class="main__text text__indent pdf-group-item">或许会有无数次</p>
        <p class="main__text text__indent pdf-group-item">被碾压的支离破碎</p>
        <p class="main__text text__indent pdf-group-item">
          拼尽余生都在修修补补
        </p>
        <p class="main__text text__indent pdf-group-item">但是那些兴趣爱好</p>
        <p class="main__text text__indent pdf-group-item">
          会让你慢慢发现一个全新的自己
        </p>
      </div>

      <!-- 分页 -->
      <div class="page-split mt-40" v-show="!isPdf"></div>

      <!-- 第二页 -->
      <div class="main page pdf-split-page">
        <h3 class="main__title w-600 pdf-group-item">
          《Cherish the low season》
        </h3>
        <p class="main__text mt-40 lh-40 pdf-group-item">
          你要克服的是你的虚荣心
        </p>
        <p class="main__text lh-40 pdf-group-item">是你的炫耀欲</p>
        <p class="main__text lh-40 pdf-group-item">
          是你时刻想要出风头的小聪明
        </p>
        <p class="main__text lh-40 pdf-group-item">在一个风华正茂的年纪里</p>
        <p class="main__text lh-40 pdf-group-item">
          那些压得我们喘不过气的焦虑
        </p>
        <p class="main__text lh-40 pdf-group-item">到底是自身的要求高</p>
        <p class="main__text lh-40 pdf-group-item">还是虚荣心在作祟</p>
        <p class="main__text lh-40 pdf-group-item">
          都知道，我们不可能突然变得优秀
        </p>
        <p class="main__text lh-40 pdf-group-item">任何事都需要一个过程</p>
        <p class="main__text lh-40 pdf-group-item">一直待在顶峰的人</p>
        <p class="main__text lh-40 pdf-group-item">也总会有一段低谷期</p>
        <p class="main__text lh-40 pdf-group-item">
          说不定是在提醒你去发现自身的问题
        </p>
        <p class="main__text lh-40 pdf-group-item">那些内心富足的人</p>
        <p class="main__text lh-40 pdf-group-item">会珍视每一段低谷期</p>
        <p class="main__text lh-40 pdf-group-item">
          这段时期往往更适合去韬光养晦
        </p>
        <p class="main__text lh-40 pdf-group-item">能滋长出向阳而生的勇气</p>
        <p class="main__text lh-40 pdf-group-item">那些内心贫瘠的人</p>
        <p class="main__text lh-40 pdf-group-item">
          反而热衷于到处吐槽自己的不易
        </p>
        <p class="main__text lh-40 pdf-group-item">
          时常将自己的不如意归结于别人身上
        </p>
        <p class="main__text lh-40 pdf-group-item">
          所以啊，低谷期就是人生的分水岭
        </p>
        <p class="main__text lh-40 pdf-group-item">熬过去就出众</p>
        <p class="main__text lh-40 pdf-group-item">熬不过去就出局</p>
      </div>
    </main>
  </div>
</template>

<script>
import { PdfLoader } from "@/utils/pdfLoader";

export default {
  name: "A4Page",

  data() {
    return {
      // pdf名称
      pdfName: "导出的.pdf",
      isPdf: false, // 是否生成pdf中
    };
  },

  created() {},

  methods: {
    // 生成pdf文件
    async createPdf() {
      return new Promise(async (resolve, reject) => {
        this.isPdf = true;
        await this.$nextTick();
        const pdfFooter = document.getElementById("pdf-footer");
        const pdfHeader = document.getElementById("pdf-header");
        setTimeout(() => {
          let pdfDom = document.getElementById("meet-pdf-id");
          let pdfObj = new PdfLoader(pdfDom, {
            fileName: this.pdfName,
            // outputType: "file",
            footer: pdfFooter,
            header: pdfHeader,
            baseY: 0,
            contentWidth: 595, // 沾满宽度，因为这里样式设置了页边距
          });
          pdfObj
            .getPdf()
            .then(async (res) => {
              this.isPdf = false;
              resolve(res);
            })
            .catch((error) => {
              this.isPdf = false;
              reject(error);
            });
        });
      }, 500);
    },
  },
};
</script>

<style lang="less" scoped>
.A4Page {
  padding: 20px;
  .main {
    // width: 297mm;
    width: 210mm;
    margin: 0 auto;
    .main__title {
      color: #000;
      font-size: 29px;
      width: 97%;
      margin: 0 auto;
      font-weight: 500;
      text-align: center;
      line-height: 40px;
      font-family: "Times New Roman", "方正小标宋简体";
    }
    .main__text {
      color: #000;
      font-weight: 500;
      line-height: 34px;
      text-align: left;
      font-size: 21px;
      font-family: "Times New Roman", "仿宋_GB2312";
    }

    .main__footer {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
    }
  }
}

// a4大小 竖向
.page {
  min-height: 297mm;
  width: 210mm;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 3.8cm 2.6cm 3.5cm; /* 国家标准公文页边距 GB/T 9704-2012 */
}

#meet-pdf-id {
  width: 210mm;
  margin: 0 auto;
}

.pdf-hf {
  position: fixed;
  top: -100vh;
  width: 210mm;
}
.pdf__output {
  .page {
    padding: 0 2.6cm;
  }
}
</style>

<style lang="less">
// 公共类，
.flex-start {
  display: flex;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-column-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.w-500 {
  font-weight: 500;
}
.w-600 {
  font-weight: 600;
}
.text__indent {
  text-indent: 2em;
}
.mt-40 {
  margin-top: 40px;
}
.mt-80 {
  margin-top: 80px;
}
.mt-30 {
  margin-top: 30px;
}
.mt-20 {
  margin-top: 20px;
}
.mb-40 {
  margin-bottom: 40px;
}
.mb-30 {
  margin-bottom: 30px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mt-100 {
  margin-top: 80px;
}
.lh-40 {
  line-height: 40px !important;
}
</style>
